<style lang="scss" scoped>
	.content {

		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tip {
		color: #98A5B3;
		padding: 0 30rpx;
		width: 100%;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.top {
		padding: 20rpx 0;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;

		.line {
			width: 100%;
			height: 100rpx;
			border-top: 1px solid #eeeeee;

			.ipt {
				width: 500rpx;
				text-align: right;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 500rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.btns {
		.btn {

			padding: 10rpx 30rpx;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}
	}




	.gray {
		position: relative;
	}

	.red {
		position: absolute;
		top: 0rpx;
		left: -10rpx;
	}

	.sbtn2 {
		width: 176rpx;
		height: 88rpx;
		border: 2rpx solid #dee2ee;
		border-radius: 46rpx;
	}

	.lbtn2 {
		width: 484rpx;
		height: 88rpx;
		border-radius: 46rpx;
		margin-right: 0;
		margin: 40rpx 0;
	}
</style>

<template>
	<view class="content">
		<view class="tip between-flex m-top30 f28">
			<view>创建人:{{info.createUser | user}}</view>
			<view>创建时间: {{info.createTime}}</view>
		</view>
		<view class="box" style="padding-bottom: 0;">
			<view class="textColor f32 bold p-bottom30">任务信息</view>
			<view class="line align-flex f28">
				<view class="gray p-right20">任务名称</view>
				<view class="textColor">{{info.taskName}}</view>
			</view>
			<view class="line align-flex f28">
				<view class="gray p-right20">计划时间</view>
				<view class="textColor">{{info.planStartDate}} 至 {{info.planEndDate}}</view>
			</view>
		</view>
		<view class="box" style="padding-bottom: 0;">
			<view class="textColor f32 bold p-bottom30">子任务信息</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>子任务名称</view>
				<input type="text" v-model="taskName" class="ipt" placeholder="请输入" />

			</view>
			<view class="line2 between-flex f28 p-top20">
				<view class="gray">子任务描述</view>
				<textarea class="des textColor" style="height:120rpx;" v-model="taskDesc" placeholder="请输入子任务描述"
					placeholder-class="gray" />

			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>责任人</view>
				<view class="blue" @click="$navTo(PagesCourseRouterConfig.ChoosePerson+'?type=2')">{{people?people.name:'请选择'}}<u-icon name='arrow-right'></u-icon>
				</view>
			</view>

			<view class="line between-flex f28">
				<view class="gray">参与人</view>
				<view class="blue align-flex" @click="!person?$navTo(PagesCourseRouterConfig.ChoosePerson):$navTo(PagesCourseRouterConfig.ChoosePerson+'?users='+person.value)">
					<span v-if="!person">请选择</span>
					<span v-else class=" align-flex">
						<view style="max-width:370rpx;" class="one">{{person.value | users}}</view>
						等{{person.value.split(',').length}}人
					</span>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>

			<view class="line between-flex f28">
				<view class="gray">计划开始时间</view>
				<picker mode="date" @change="chooseDate($event,1)">
					<view class="blue">{{planStartDate?planStartDate:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
			</view>
			<view class="line between-flex f28">
				<view class="gray">计划结束时间</view>
				<picker mode="date" @change="chooseDate($event,2)">
					<view class="blue">{{planEndDate?planEndDate:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
			</view>
			<view class="line between-flex f28">
				<view class="gray">预计工时（单位：天）</view>
				<input type="digit" style="width:300rpx;" v-model="planDays" class="ipt" placeholder="请输入" />

			</view>
		</view>
	
		

		<view class="space"></view>
		<view class="footer between-flex paddingBottom">
			<view class="sbtn2 center-flex textColor bold f32" @click="$back">返回</view>
			<view class="lbtn2 center-flex bgblue cfff bold f32" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
	export default {
		data() {
			return {
				PagesCourseRouterConfig,
				navheight: 0,
				head: this.$head,
				checked: true,
				id: 0, //主任务id
				info: {},
				taskName: '',
				taskDesc: '',
				planStartDate: '',
				planEndDate: '',
				peopleType:1,//选择任务分类
				people:null,//责任人
				person:null,//参与人
				planDays:''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getinfo()
			 this.getdate()
			
		},
		
		methods: {
			submit(){
				if (!this.taskName) {
					this.$msg('请输入子任务名称！')
					return
				}
				if (!this.people) {
					this.$msg('请选择负责人！')
					return
				}
				
							
				var obj = {
					parentId:this.id,
					taskName:this.taskName,
					taskOrder:this.info.taskChild?(this.info.taskChild.length+1):1,
					taskDesc:this.taskDesc,
					leaderUser:this.people?this.people.value:'',
					planStartDate:this.planStartDate,
					planEndDate:this.planEndDate,
					planDays:this.planDays,
					partUserJson:this.person?this.person.value:''
				}
				// console.log(obj)
			
				this.$showloading()
				this.$pop.ajaxPost('/bus/taskInfo/addChild',obj).then((res)=>{
					uni.hideLoading()
					if(res.code==0){
						this.$msg('添加成功！')
						
						setTimeout(()=>{
						uni.navigateBack({
							
						})	
						},1500)
					}else{
					this.$msg(res.msg)	
					}
				})
			},
			getinfo() {
				this.$pop.ajaxPost('/bus/taskInfo/details', {
					id: this.id
				}).then(res => {
					this.info = res.body
				})
			},
			chooseDate(e, type) {
				if (type == 1) {
					this.planStartDate = e.detail.value
				} else if (type == 2) {
					this.planEndDate = e.detail.value
				}
			},
			getdate() {
				var date = new Date();

				this.date = parseInt(date.getTime() / 1000)
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
				this.planStartDate = currentdate

			},

		}
	}
</script>
